<template>
  <my-dv-page v-bind="$attrs">
    <my-dv-header3>
      <my-dv-title type="primary" strong shadow x-align="center">广西农信数据可视化大屏</my-dv-title>
    </my-dv-header3>
    <my-dv-box layout :gap="20" top="100px" left="20px" width="calc(100% - 40px)" height="calc(100% - 120px)">
      <my-dv-box width="100%" :weight="2" layout direction="column" :gap="20">
        <my-dv-box layout :gap="20" height="100%">
          <my-dv-border9 width="100%">
            <my-dv-title :level="6" left="10px" top="10px" shadow strong type="primary">系统交易量总览</my-dv-title>
            <my-dv-box layout :gap="0" top="50px" height="calc(100% - 40px)" width="100%">
              <my-dv-box v-for="(items,index) in chart1" :key="index" layout width="100%" direction="column">
                <my-dv-box v-for="(item,key) in items" :key="key" height="100%" content-align="center">
                  <my-dv-number :value="item.value" :level="3" :position="false"
                                :percentage="item.percentage"></my-dv-number>
                  <my-dv-text :level="4" :position="false" type="secondary">{{item.label}}</my-dv-text>
                </my-dv-box>
              </my-dv-box>

            </my-dv-box>
          </my-dv-border9>
          <my-dv-border9 width="100%">
            <my-dv-title :level="6" left="10px" top="10px" shadow strong type="primary">农信银实时成交额情况</my-dv-title>
            <my-dv-ring fit :columns="pie.columns" :rows="pie.rows" legend="v"></my-dv-ring>
          </my-dv-border9>
        </my-dv-box>
        <my-dv-border9 height="100%" :weight="3">
          <my-dv-title :level="6" left="10px" top="10px" shadow strong type="primary">全区实时业务量情况</my-dv-title>
          <my-dv-loading v-if="loading"></my-dv-loading>
          <my-dv-geo v-else fit :json="map.json" :columns="map.columns" :rows="map.rows"
                     :visual="map.visual" :type="map.type" :type-helper="typeHelper"></my-dv-geo>
          <my-dv-menu :data="menusObject" :default-active="menuActiveIndex" @click="handleMenuClick" top="0px" right="70px"
                      :zoom="0.7"></my-dv-menu>
        </my-dv-border9>
        <my-dv-box layout :gap="20" height="100%">
          <my-dv-border9 width="100%">
            <my-dv-title :level="6" left="10px" top="10px" shadow strong type="primary">系统实时TPS情况</my-dv-title>
            <my-dv-list scroll
                        top="30px"
                        width="100%"
                        height="260px"
                        :columns="list.columns"
                        :rows="list.rows"></my-dv-list>
          </my-dv-border9>
          <my-dv-border9 width="100%">
            <my-dv-title :level="6" left="10px" top="10px" shadow strong type="primary">系统成功率情况</my-dv-title>
            <my-dv-list scroll
                        top="30px"
                        width="100%"
                        height="260px"
                        :columns="list2.columns"
                        :rows="list2.rows"></my-dv-list>
          </my-dv-border9>
        </my-dv-box>
      </my-dv-box>
      <my-dv-box width="100%" layout direction="column" :gap="20">
        <my-dv-border9 height="100%">
          <my-dv-title :level="6" left="10px" top="10px" shadow strong type="primary">核心业务量趋势图</my-dv-title>
          <my-dv-bar fit :columns="bar.columns" :rows="bar.rows" legend :extend="extend"></my-dv-bar>
        </my-dv-border9>
        <my-dv-border9 height="100%">
          <my-dv-title :level="6" left="10px" top="10px" shadow strong type="primary">农信银业务量趋势图</my-dv-title>
          <my-dv-line fit :columns="line.columns" :rows="line.rows" legend :extend="extend" :settings="line.settings"></my-dv-line>
        </my-dv-border9>
      </my-dv-box>
    </my-dv-box>


  </my-dv-page>
</template>
<script>
import china from '$ui/charts/geo/province/guangxi.json'
import { getListTps, getChartOne, getNxyTrends, getCoreTrends, getAreaMap, getPieNxy, getSuccessRate, getTotalTradeCount } from '../api/product'

export default {
  // created() {
  //   request({
  //     method:'POST',
  //     url:'/esProduct/importAll',
  //     params:{test:'111',hello:'world'},
  //   })
  // },
  created() {
    this.fetchData()
  },
  data() {
    return {
      chart1: '',
      pie: {
        columns: ['办事处', '交易金额'],
        rows: [
          ['南宁市', 320],
          ['柳州市', 302],
          ['桂林市', 334]
        ]
      },
      bar: {
        columns: ['南宁市','柳州市','桂林市'],
        rows: [
          ['', 0,0]
        ]
      },
      line: {
        columns: ['南宁市','柳州市','桂林市'],
        rows: [
          ['', 0, 0]
        ],
        settings: {
          stack: ['']
        }
      },
      map: {
        json: china,
        columns: ['办事处', '实时业务量'],
        type: {'实时业务量': 'effectScatter'},
        rows: ''
      },
      list: {
        columns: ['业务系统', 'TPS'],
        rows: ''
      },
      list2: {
        columns: ['业务系统', '成功率'],
        rows: ''
      },
      menus: [
        // {text: '年', width: 150},
        // {text: '月', width: 150},
        {text: '实时业务量:701232', width: 250}
      ],
      menusObject: {
        text: '实时业务量:701232',
        width: 250
      },
      menuActiveIndex: 0,
      loading: true,
      timer: '',
      extend: {
        yAxis: {
          axisLabel: {
            formatter: function (value, index) {
              console.log(value + 'first')
              if (value >= 10000) {
                value = value / 10000 + "万";
              }
              return value;
            }
          },
          type: 'value'
        }
      }
    }
  },
  methods: {
    handleMenuClick(item, index) {
      console.log(index)
      this.menuActiveIndex = index
    },
    typeHelper({type}) {
      if (type === 'effectScatter') {
        return {
          label: {
            show: true,
            formatter: '{b}:{@[2]}',
            position: 'top'
          }
        }
      }
    },
    fetchData() {
      // debugger;
      getListTps().then(response => {
        this.list.rows = response.data.data.rows
      })
      getSuccessRate().then(response => {
        this.list2.rows = response.data.data.rows
      })
      getAreaMap().then(response => {
        this.map.rows = response.data.data
      })
      getCoreTrends().then(response => {
        this.bar = response.data.data
      })
      getNxyTrends().then(response => {
        this.line = response.data.data
      })
      getPieNxy().then(response => {
        this.pie = response.data.data
      })
      getChartOne().then(response => {
        this.chart1 = response.data.data
      })
      getTotalTradeCount().then(response => {
        this.menusObject = response.data.data
      })
    }
  },
  mounted() {
    setTimeout(() => {
      this.loading = false
    }, 500)
    this.timer = setInterval(this.fetchData, 30000);
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  }
}

</script>
<style lang="scss" scoped>
.my-dv-page {
  background-image: url("~$ui/assets/bg/03.jpg");
  background-size: cover;
}

.my-dv-list {

  /deep/ {
    td, th {
      text-align: center;
    }
  }
}

.my-dv-menu {
  /deep/ {
    .my-dv-menu-item {
      margin-left: -50px;
    }
  }
}
</style>
